<template>
  <div>
    <h2>通过props 展示</h2>
    <ul>
      <li :style="{opacity}">欢迎学习vue</li>
      <li v-for="item of list" :key="item.id">
        <router-link :to="{
          name: 'newsDetail',
          params: {
            id: item.id,
            title: item.title
          },
          query: {
            queryid: item.id,
          }
        }">
          {{item.title}}
        </router-link>
        <input type="text">
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'NewsView',
  data() {
    return {
      list: [
        {id: '001', title: 'title1111'},
        {id: '002', title: 'title2222'},
        {id: '003', title: 'title3333'}
      ],
      opacity:1
    }
  },
  activated() {
    console.log('activated')
    this.timer = setInterval(() => {
      console.log('setInterval')
      this.opacity -= 0.05
      if(this.opacity <= 0) this.opacity = 1
    }, 500)
  },
  deactivated() {
    console.log('deactivated')
    clearInterval(this.timer)
  }
}
</script>

<style>

</style>